<!--开通会员 -->

<script>
import { getBanner } from "../api/home.js";
import { reactive } from "vue";
import { onMounted, toRefs } from "@vue/runtime-core";
import { Dialog } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
        const router = useRouter();
      const VanDialog = Dialog.Component;
    const list = reactive({
      vip:0
    });


//购买vip
let getvip=()=>{
  console.log(list.vip);
  Dialog.confirm({
  title: '是否购买',
 
})
  .then(() => {
    // on confirm
    console.log('购买');
    list.vip=1
     list.vip= JSON.stringify(list.vip);
              window.localStorage.setItem("vip", list.vip);
              router.push({name:'my'})

  })
  .catch(() => {
    // on cancel
    console.log('不购买');
  });

}


    onMounted(()=>{
          let vip = window.localStorage.getItem("vip");
      vip= JSON.parse(vip);
      list.vip = vip;
      
    })
    getBanner().then((data) => {
      //获取数据
      list.lists = data.data;
      console.log("精选", list.lists);
    });
    return {
      VanDialog,
      getvip,
      ...toRefs(list),
      router 
    };
  },
};
</script>
<template>
  <div class="member">
    <div class="top_box">
      <div class="top_navbar">
        <div class="back_l">
          <span
            @click="$router.go(-1)"
            class="iconfont icon-zuojiantou-copy"
          ></span>
        </div>
        <p>订购会员</p>
        <div class="say_r">说明</div>
      </div>
      <div class="bg_box">
        <div class="bg_center">
          <div class="bg_black">会员专享权益</div>
        </div>
        <div class="bg_top">
          <div class="bg_bottom">
            <div class="bor_box">
              <div class="label">
                <span class="iconfont icon-book"></span>
                <p>好书畅读</p>
              </div>
              <div class="label">
                <span class="iconfont icon-dazhe"></span>
                <p>购书9折</p>
              </div>
              <div class="label">
                <span class="iconfont icon-youhuijuan"></span>
                <p>额外礼券</p>
              </div>
              <div class="label">
                <span class="iconfont icon-qiandao"></span>
                <p>免费补签</p>
              </div>
              <div class="label">
                <span class="iconfont icon-jinbi2"></span>
                <p>专属限免</p>
              </div>
              <div class="label">
                <span class="iconfont icon-huiyuan"></span>
                <p>尊贵身份</p>
              </div>
              <div class="label">
                <span class="iconfont icon-fenlei1"></span>
                <p>敬请期待</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 充值 -->
    <div class="recharge_box">
      <div class="recharge" @click="getvip">
        <div class="recharge_l">
          <p>连续会员</p>
          <span>自动扣费，可随时取消</span>
        </div>
        <div class="recharge_r">￥10</div>
      </div>
      <div class="recharge2" @click="getvip">
        <div class="recharge_l">
          <p>
            1个月
            <span class="hot">首次开通</span>
          </p>
          <span class="preferential">万本好书免费读</span>
        </div>
        <div class="recharge_r">￥10</div>
        <p class="old_price">原价 ￥12</p>
      </div>
      <div class="recharge2" @click="getvip">
        <div class="recharge_l">
          <p>
            3个月
            <span class="hot">限时特惠</span>
          </p>
          <span class="preferential">赠300礼券，折合10元/月</span>
        </div>
        <div class="recharge_r">￥30</div>
        <p class="old_price">原价 ￥35</p>
      </div>
      <div class="recharge2" @click="getvip">
        <div class="recharge_l">
          <p>
            12个月
            <span class="hot">超值推荐</span>
          </p>
          <span class="preferential">赠600礼券，每月仅需9元</span>
        </div>
        <div class="recharge_r">￥108</div>
        <p class="old_price">原价 ￥113</p>
      </div>
    </div>

  </div>
</template>


<style lang="scss" scoped>
.member {
  .top_box {
    background: url("../assets/img2/ais.jpg") no-repeat;
    padding: 0 16px;
    background-size: 100%;
    .top_navbar {
      // padding: 0 16px;
      color: #363847;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .iconfont {
        font-size: 22px;
      }
      p {
        font-size: 18px;
      }
      .say_r {
        font-size: 18px;
      }
    }
    .bg_box {
      padding-top: 27px;
      // height: 90px;
      position: relative;
      .bg_top {
        background-color: #c69840;
        border-radius: 6px;
        padding-top: 13px;
        .bg_bottom {
          // position: absolute;
          background-color: #fffefa;
          box-shadow: 0px 3px 20px #f6f2eb;
          padding: 5px;
          border-radius: 0px 0px 6px 6px;

          .bor_box {
            border: 1px solid #f8fbea;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .label {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 17px;
              p {
                font-size: 12px;
                color: #3b383a;
                padding-top: 10px;
              }
              .iconfont {
                font-size: 25px;
                color: #f1b85c;
              }
            }
          }
        }
      }
      .bg_center {
        position: absolute;
        top: 3px;
        left: 0;
        right: 0;
        border-radius: 9px;
        overflow: hidden;
        padding: 0 16px;
        .bg_black {
          background: url("../assets/img2/air.png") no-repeat;
          // height: 45px;
          background-size: 100%;
          border-radius: 9px;
          display: flex;
          align-items: center;
          font-size: 17px;
          font-weight: 600;
          color: #ccbca6;
          padding: 10px 0 4px 18px;
        }
      }
    }
  }
  .recharge_box {
    padding: 0 16px;
    margin-bottom: 20px;
    .recharge {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      border: 2px solid #f6efd3;
      background-color: #fefaee;
      margin-top: 15px;
      border-radius: 7px;
      .recharge_l {
        p {
          font-size: 16px;
          color: #000001;
          padding-bottom: 6px;
        }
        span {
          font-size: 13px;
          color: #a19aa7;
        }
      }
      .recharge_r {
        border-radius: 5px;
        padding: 11px 21px;
        border: 1px solid #ffffff;
        background-image: linear-gradient(to right, #5b5c5c, #474345);
        background-color: #575755;
        color: #eee1c7;
        font-size: 15px;
      }
    }
    .recharge2 {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      border: 2px solid #f6efd3;
      // background-color: #fefaee;
      margin-top: 15px;
      border-radius: 7px;
      position: relative;
      .recharge_l {
        p {
          font-size: 16px;
          color: #000001;
          padding-bottom: 6px;
          .hot {
            // display: block;
            font-size: 12px;
            color: #fff;
            border: 1px solid #ff5457;
            padding: 2px 7px;
            background-color: #fc686a;
            border-radius: 0px 12px 12px 14px;
          }
        }
        .preferential {
          font-size: 13px;
          color: #a19aa7;
        }
      }
      .recharge_r {
        border-radius: 5px;
        padding: 11px 21px;
        border: 1px solid #ffffff;
        background-image: linear-gradient(to right, #ffebc1, #fad385);
        background-color: #fad385;
        color: #5d430c;
        font-size: 15px;
      }
      .old_price {
        position: absolute;
        right: 28px;
        bottom: 1px;
        font-size: 12px;
        color: #908f92;
        text-decoration: line-through;
      }
    }
  }
  .book_box {
    padding: 0 8px;
    .title {
      padding-top: 10px;
      padding: 0 8px;
      font-size: 15px;
      font-weight: 600;
      color: #37363c;
    }
    .book_item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .book {
        margin-top: 20px;
        padding: 0 8px;
        width: 20%;
        .book_img {
          height: 100px;
          border-radius: 3px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .book_title {
          // width: 25%;
          font-size: 13px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-top: 5px;
        }
        .author {
          margin-top: 5px;
          color: #9a999f;
          font-size: 10px;
        }
      }
    }
  }
  .look_more {
    padding: 0 16px;
    .see {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 22px 0;
      background: url("../assets/img2/aiw.png");
      text-align: center;
      padding: 15px 0;
      border-radius: 32px;
      p {
        // display: inline-block;
        font-size: 15px;
        .iconfont {
          color: #fff;
          font-size: 12px;
        }
      }
      .look {
        color: #70521b;
        margin-right: 15px;
      }
      .next {
        // margin-left: 15px;
        width: 18px;
        height: 18px;
        background-color: #d19d4a;
        border-radius: 50%;
        // line-height: 14px;
        text-align: center;
        transform: scale(0.7);
      }
    }
  }
}
</style>